<template>
    <div>
        <Modal v-model="modal1" title="查看详情">
            <Table :columns="columns4" :data="data2" :loading="loading"></Table>
        </Modal>
        <Modal v-model="modal2" title="查看详情">
            <Table :columns="columns5" :data="data3" :loading="loading"></Table>
        </Modal>
        <Modal v-model="modal3" title="查看详情">
            <Tabs value="name1">
                <TabPane label="考勤纪律" name="name1">迟到-2</TabPane>
                <TabPane label="政治业务" name="name2">615政治学习-3</TabPane>
                <TabPane label="工作纪实" name="name3">业务受理+15</TabPane>
                <TabPane label="效能监督" name="name4">玩游戏-10</TabPane>
            </Tabs>
        </Modal>
        <Tabs value="name1">
            <TabPane label="区县排行" name="name1">
                <Row>
                    <Col span="5">
                        <DatePicker type="month" placeholder="请选择月份" style="width: 200px"></DatePicker>
                    </Col>
                    <Col span="5">
                        <Button type="primary" v-on:click=" select1()">查询</Button>
                    </Col>
                </Row>
                <br><br>
                <Table :columns="columns1" :data="data111" :loading="loading"></Table>
            </TabPane>
            <TabPane label="街道排行" name="name2">
                <Row>
                    <Col span="5">
                        <DatePicker type="month" placeholder="请选择月份" style="width: 200px"></DatePicker>
                    </Col>
                    <Col span="5">
                        <Cascader :data="cascaderData" style="width:200px" placeholder="选择区县 / 街道"></Cascader>
                    </Col>
                    <Col span="5">
                        <Button type="primary">查询</Button>
                    </Col>
                </Row>
                <br><br>
                <Table :columns="columns2" :data="data2"></Table>
            </TabPane>
            <TabPane label="社区排行" name="name4">
                <Row>
                    <Col span="5">
                        <DatePicker type="month" placeholder="请选择月份" style="width: 200px"></DatePicker>
                    </Col>
                    <Col span="5">
                        <Cascader :data="cascaderData" style="width:200px" placeholder="选择区县 / 街道 / 社区"></Cascader>
                    </Col>
                    <Col span="5">
                        <Button type="primary">查询</Button>
                    </Col>
                </Row>
                <br><br>
                <Table :columns="columns2" :data="data2"></Table>
            </TabPane>
            <TabPane label="个人排行" name="name3">
                <Row>
                    <Col span="5">
                        <DatePicker type="month" placeholder="请选择月份" style="width: 200px"></DatePicker>
                    </Col>
                    <Col span="5">
                        <Cascader :data="cascaderData" style="width:200px" placeholder="选择区县 / 街道 / 社区"></Cascader>
                    </Col>
                    <Col span="5">
                        <Button type="primary">查询</Button>
                    </Col>
                </Row>
                <br><br>
                <Table :columns="columns3" :data="data3"></Table>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      modal3: false,
      loading: false,
      // 区县排行
      columns1: [
        {
          title: '排名',
          key: 'ranking',
          width: 80
        },
        {
          title: '机构',
          key: 'organization',
          width: 100
        },
        {
          title: '月度平均分',
          key: 'monthScore',
          width: 135
        }, {
          title: '考勤纪律（30%）',
          key: 'score',
          width: 135
        }, {
          title: '政治任务（20%）',
          key: 'score',
          width: 135
        },
        {
          title: '工作纪实（40%）',
          key: 'appraisal',
          width: 135
        },
        {
          title: '能效普查（10%）',
          key: 'appraisal',
          width: 135
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看详情')])
          }
        }
      ],
      // 街道社区用的一个数据
      columns2: [
        {
          title: '排名',
          key: 'ranking',
          width: 80
        },
        {
          title: '机构',
          key: 'organization'
        },
        {
          title: '月度平均分',
          key: 'monthScore',
          width: 135
        }, {
          title: '考勤纪律（30%）',
          key: 'attendance',
          width: 135
        }, {
          title: '政治任务（20%）',
          key: 'task',
          width: 135
        },
        {
          title: '工作纪实（40%）',
          key: 'work',
          width: 135
        }, {
          title: '能效普查（10%）',
          key: 'energy',
          width: 135
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show2(params.index)
                  }
                }
              }, '查看详情')])
          }
        }
      ],
      // 个人排名
      columns3: [
        {
          title: '排名',
          key: 'ranking',
          width: 80
        },
        {
          title: '姓名',
          key: 'name',
          width: 150

        },
        {
          title: '综合得分',
          key: 'synthesisScore',
          width: 150

        },
        {
          title: '考勤纪律（30%）',
          key: 'energy',
          width: 150

        }, {
          title: '政治业务（20%）',
          key: 'task',
          width: 150

        }, {
          title: '工作纪实（40%）',
          key: 'work',
          width: 150

        },
        {
          title: '能效普查（10%）',
          key: 'energy',
          width: 150

        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show3(params.index)
                  }
                }
              }, '查看详情')])
          }
        }],
      // 区县排行查看详情
      columns4: [
        {
          title: '排名',
          key: 'ranking',
          width: 90
        },
        {
          title: '机构',
          key: 'organization',
          width: 260
        },
        {
          title: '月度平均分',
          key: 'monthScore'
        }
      ],
      // 社区排名查看详情
      columns5: [
        {
          title: '排名',
          key: 'ranking'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '月度平均分',
          key: 'task'
        }],
      // 区县排名数据
      data1: [
        {
          ranking: '1',
          organization: '和平区',
          monthScore: '100分',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '2',
          organization: '沈河区',
          monthScore: '99分',
          score: '99分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '3',
          organization: '皇姑区',
          monthScore: '98分',
          score: '90分',
          appraisal: '100分',
          streetAssessmentsSection: '93分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '4',
          organization: '大东区',
          monthScore: '97分',
          score: '98分',
          appraisal: '100分',
          streetAssessmentsSection: '92分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '5',
          organization: '铁西区',
          monthScore: '96分',
          score: '87分',
          appraisal: '100分',
          streetAssessmentsSection: '90分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '6',
          organization: '浑南区',
          monthScore: '95分',
          score: '86分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '7',
          organization: '于洪区',
          monthScore: '94分',
          score: '85分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '8',
          organization: '沈北新区',
          monthScore: '93分',
          score: '84分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '9',
          organization: '苏家屯区',
          monthScore: '92分',
          score: '83分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '10',
          organization: '辽中区',
          monthScore: '91分',
          score: '82分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '11',
          organization: '康平县',
          monthScore: '99分',
          score: '81分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '12',
          organization: '法库县',
          monthScore: '98分',
          score: '80分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '13',
          organization: '新民市',
          monthScore: '97分',
          score: '80分',
          appraisal: '100分',
          streetAssessmentsSection: '88分',
          streetAssessmentsSection1: '80分'
        }
      ],
      // 区县排名选着日期后搜索的数据
      data11: [
        {
          ranking: '1',
          organization: '沈河111111',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '2',
          organization: '沈河',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '3',
          organization: '沈河',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '4',
          organization: '沈河',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '5',
          organization: '沈河',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '6',
          organization: '沈河',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '7',
          organization: '和平区',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        },
        {
          ranking: '8',
          organization: '和平区',
          monthScore: '优',
          score: '100分',
          appraisal: '100分',
          streetAssessmentsSection: '94分',
          streetAssessmentsSection1: '80分'
        }
      ],
      // 区县排名空，刷新数据用
      data111: [],
      // 街道排行/社区排行
      data2: [
        {
          ranking: '1',
          organization: '沈阳市大东区二台子街道办事处',
          monthScore: '97.2分',
          attendance: '100分',
          task: '100分',
          work: '100分',
          energy: '94分'
        },
        {
          ranking: '2',
          organization: '沈阳市大东区津桥街道办',
          monthScore: '96.6分',
          attendance: '98分',
          task: '100分',
          work: '100分',
          energy: '94分'
        },
        {
          ranking: '3',
          organization: '沈阳市大东区新东街道办事处',
          monthScore: '96.2分',
          attendance: '98分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '3',
          organization: '沈阳市大东区新东街道办事处',
          monthScore: '96.1分',
          attendance: '96分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '4',
          organization: '沈阳市大南街道办',
          monthScore: '95.8分',
          attendance: '95分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '5',
          organization: '沈阳市大东区新东街道办事处',
          monthScore: '95.6分',
          attendance: '94分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '6',
          organization: '沈阳市东塔街道办',
          monthScore: '95.2分',
          attendance: '93分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '7',
          organization: '沈阳市和平区北市场街道办事处',
          monthScore: '95.1分',
          attendance: '92分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '8',
          organization: '沈阳市和平区集贤街道办事处',
          monthScore: '94.9分',
          attendance: '92分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '9',
          organization: '沈阳市和平区马路湾街道办事处',
          monthScore: '94.6分',
          attendance: '90分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '10',
          organization: '沈阳市和平区政府太原街街道办事处',
          monthScore: '94.2分',
          attendance: '88分',
          task: '100分',
          work: '100分',
          energy: '94分'
        }
      ],
      // 个人排行
      data3: [
        {
          ranking: '1',
          name: '包松伯',
          organization: '丽丽',
          synthesisScore: '10分',
          attendance: '优',
          task: '100分',
          work: '100分',
          energy: '94分'
        },
        {
          ranking: '2',
          name: '刘小平',
          organization: '小明',
          synthesisScore: '10分',
          attendance: '优',
          task: '98分',
          work: '100分',
          energy: '94分'
        },
        {
          ranking: '3',
          name: '孙焕',
          organization: '小李',
          synthesisScore: '10分',
          attendance: '优',
          task: '97分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '5',
          name: '方天芬',
          organization: '小王',
          synthesisScore: '10分',
          attendance: '优',
          task: '96分',
          work: '100分',
          energy: '94分'
        }, {
          ranking: '6',
          name: '张夏清',
          organization: '小李',
          synthesisScore: '10分',
          attendance: '优',
          task: '95分',
          work: '100分',
          energy: '94分'
        }
      ],
      // 联动菜单假数据
      cascaderData: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙'
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园'
                },
                {
                  value: 'shizilin',
                  label: '狮子林'
                }
              ]
            }
          ]
        }],
      cityList:
          [
            {
              value: 'New York',
              label: 'New York'
            },
            {
              value: 'London',
              label: 'London'
            },
            {
              value: 'Sydney',
              label: 'Sydney'
            },
            {
              value: 'Ottawa',
              label: 'Ottawa'
            },
            {
              value: 'Paris',
              label: 'Paris'
            },
            {
              value: 'Canberra',
              label: 'Canberra'
            }
          ]
    }
  },
  mounted () {
    // 默认加载数据
    this.data111 = this.data1
  },
  methods: {
    show (index) {
      this.modal1 = true
    },
    show2 (index) {
      this.modal2 = true
    },
    show3 (index) {
      this.modal3 = true
    },
    select1 () {
      this.loading = true
      this.data111 = []
      this.data111 = this.data11
      this.loading = false
    }
  }
}
</script>
<style scoped>

</style>
